<template>
	<div id="roleManage" class="roleManage">
		<div v-transfer-dom>
			<confirm v-model="show"
			         :title="confirmTitle"
			         @on-cancel="onCancel"
			         @on-confirm="onConfirm">
				<p style="text-align:center;"><span v-html="message"></span></p>
			</confirm>
		</div>
		<grid class="gridTitle" :show-vertical-dividers="false">
			<grid-item>
				<span class="grid-center">角色</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">角色名</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">状态</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">操作</span>
			</grid-item>
		</grid>
		<grid class="gridCell" v-for="(item, index) in items" :show-vertical-dividers="false">
			<grid-item class="grid-item" @click.native="jumpTo(item.id)">
				<span class="grid-center-link">{{item.role_name}}</span>
			</grid-item>
			<grid-item class="grid-item">
				<span class="grid-center">{{item.role_description}}</span>
			</grid-item>
			<grid-item class="grid-item">
				<span class="grid-center" v-if="item.status == 1">活动</span>
				<span class="grid-center" v-else>禁止</span>
			</grid-item>
			<grid-item class="grid-item" @click.native="onClickDelete(index, item)">
				<span class="grid-center-link"><x-icon type="ios-close-outline" size="13"></x-icon></span>
			</grid-item>
		</grid>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../utils/networking'
	import {Swipeout, SwipeoutItem, SwipeoutButton, Cell, XButton, Group, GridItem, Grid, TransferDomDirective as TransferDom, Confirm} from 'vux'
	const URL = 'roles'
	export default {
		name: "role-manage",
		components: {
			Swipeout,
			SwipeoutItem,
			SwipeoutButton,
			Cell,
			XButton,
			Group,
			GridItem,
			Grid,
			TransferDom,
			Confirm
		},
		directives: {
			TransferDom
		},
		data() {
			return {
				items: [],
				message: '',
				title: '用户管理',
				confirmTitle: '操作提示',
				show: false,
				curIndex: '',
				curItem: ''
			}
		},
		created: function () {
			bus.$emit("barController", 3)
			bus.$emit("setTopSimpleWithNewTitle", '角色管理')
			bus.$emit("setNewCompDetails", 'roleNew')

			let _this = this
			NetWorking.doGet(
				URL,
				null,
				null
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.items = rs.role_list
					}else{
						alert("rs.error_message")
					}
				}
			)
		},
		methods: {
			onCancel: function () {
				this.show = false
			},
			onConfirm: function () {
				this.deleteElement()
			},
			onClickDelete(index, item) {
				this.show = true
				this.curIndex = index
				this.curItem = item
				this.message = '确定要删除<span style="color: red; font-weight: bold">' + this.curItem.role_description + '</span>吗？'
			},
			jumpTo(id) {
				this.$router.push({ name: "roleUpdate", params: {id: id}})
			},
			deleteElement () {
				let _this = this
				NetWorking.doDelete(
					URL,
					null,
					{
						params: {
							id: this.curItem.id
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.items.splice(this.curIndex, 1)
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style>
	.roleManage {
		margin-top: 46px;
		margin-bottom: 80px;
	}

	.newRole {
		margin-top: 0px !important;
		text-align: right;
		margin-right: 12px;
	}

	.newRoleTitle {
		font-size: 22px;
		font-weight: bold;
		float: left;
		margin-left: 12px;
	}

	.newRoleBtn {
		color: white !important;
		background-color: #efae1b !important;
		margin-bottom: 12px;
	}
</style>